<template>
  <div id="index">
    <div class="mod-config" id="adminList">
      <el-form id="admninFrom" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <!-- <el-form-item>
          <el-input v-model="dataForm.key" placeholder="样机型号·名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
          <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除
          </el-button>
        </el-form-item> -->
      </el-form>
      <el-table id="table"
                :data="dataList"
                border
                v-loading="dataListLoading"
                @selection-change="selectionChangeHandle">
        <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="id"
            header-align="center"
            align="center"
            label="id">
        </el-table-column>
        <el-table-column prop="projectNumber" header-align="center" align="center" label="项目编号">
        </el-table-column>
        <el-table-column prop="dataTime" header-align="center" align="center" label="检测日期">
        </el-table-column>
        <el-table-column
          prop="statusText"
          header-align="center"
          align="center"
          label="状态">
      </el-table-column>
        <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="350"
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="preview(scope.row.id)">预览</el-button>
            <el-button type="primary" size="small" @click="audit(scope.row.id)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination id="page"
                     @size-change="sizeChangeHandle"
                     @current-change="currentChangeHandle"
                     :current-page="pageIndex"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="pageSize"
                     :total="totalPage"
                     layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <preview v-if="previewVisible" :id="curPreviewId" @closePreview="previewVisible = false"></preview>
      <audit v-if="auditVisible" ref="audit" :id="curId" @refreshDataList="getDataList" @cancelVisible="auditVisible = false;"></audit>
    </div>
  </div>
</template>

<script>
import Audit from "./item/audit.vue";
import preview from "./item/preview.vue";


export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      previewVisible: false,
      curPreviewId: 0,
      auditVisible: false,
      curId: 0
    }
  },
  components: {
    Audit,
    preview
  },
  activated() {
    this.getDataList()
  },
  methods: {
    audit(id){
      this.auditVisible = true;
      this.curId = id;
    },
    preview(id) {
      this.curPreviewId = id;
      this.previewVisible = true;
    },
    download(pdfPath) {
      // const blob = this.response;
      const link = document.createElement("a");
      link.href = pdfPath;
      // link.download = '文件名称' + url.substring(url.lastIndexOf(".") + 1, url.length);
      //此写法兼容可火狐浏览器
      document.body.appendChild(link);
      const evt = document.createEvent("MouseEvents");
      evt.initEvent("click", false, false);
      link.dispatchEvent(evt);
      window.URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/reportapproval/keyinstrument/auditList'),
        method: 'post',
        data: this.$http.adornData({
          'pageNo': this.pageIndex,
          'pageSize': this.pageSize,
          'searchKey': this.dataForm.key
        })
      }).then((data) => {
        if (data && data.code === 0) {
          console.log(data)
          this.dataList = data.data.records
          this.totalPage = data.data.pages
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      const ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      });
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/reportapproval/testssummarytable/batchDelete'),
          method: 'post',
          data: ids
        }).then((data) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }
  }
}
</script>
